<template>
  <div class="proReport-warp">
    <div class="proReport-pageTop">
      <div class="proReport-title">{{data.Name}}</div>
      <div class="proReport-info">
        <div class="Report-organization">
          <span>机构</span>:&ensp;
          <text>{{data.OrgName}}</text>
        </div>
        <div class="Report-time">
          <span>时间</span>:&ensp;
          <text>{{data.BTime}} 至 {{data.ETime}}</text>
        </div>
        <div class="Report-number-people" v-if="RoleCode=='Leader'">
          <span>人数</span>:&ensp;
          <text>{{data.UserCount}}人</text>
        </div>
        <div class="Report-course" v-if="RoleCode=='Leader'">
          <span>课程</span>:&ensp;
          <text>{{data.CourseNum}}</text>
        </div>
        <div class="infoShow" v-if="RoleCode=='User'">
          <div class="circle">
            <span>{{data.TSumScore}}</span>
            <span>学分</span>
          </div>
          <div class="circle">
            <span>{{data.AttendanceRate}}%</span>
            <span>出勤率</span>
          </div>
        </div>
        <!-- 专家 -->
        <div class="infoShow" v-if="RoleCode=='Expert'">
          <div class="circle" @click="attendance">
            <span>{{data.AttendanceRate}}%</span>
            <span>出勤率</span>
          </div>
          <div class="circle">
            <span>{{data.ExpertSatisfaction}}%</span>
            <span>专家满意度</span>
          </div>
          <div class="circle">
            <span>{{data.CourseSatisfaction}}%</span>
            <span>学习满意度</span>
          </div>
        </div>
        <!-- 领导 -->
        <div class="infoShow" v-if="RoleCode=='Leader'">
          <div class="circle" @click="attendance">
            <span>{{data.AttendanceRate}}%</span>
            <span>出勤率</span>
          </div>
          <div class="circle">
            <span>{{data.SummaryNum}}/{{data.SummaryAppraisingNum }}/{{data.UserCount }}</span>
            <span style="text-align: center;">总结/评优/总人数</span>
          </div>
          <!-- <div class="circle">
                          <span>{{data.QXTrainingInfo.CourseSatisfaction}}%</span>
                          <span>课程满意度</span>
                      </div> -->
        </div>
      </div>
      <div v-if="RoleCode=='Leader'&& showChartBool">
        <canvas canvas-id="barCanvas" class="charts-wrap"></canvas>
      </div>
      <div class="curriculum" v-if="RoleCode !=='Leader'">
        <div class="curriculum-tite">课程</div>
        <div class="curriculum-content">
          <div class="curriculum-content-info" v-for="(item,index) in projeclist" :key="index">
            <div class="curriculum-content-title" @click.stop.prevent="navToDetail(item)">
              <span></span>&ensp;{{item.Title}}
            </div>
            <div class="curriculum-content-specialist">专家:&ensp;{{item.Creator}}</div>
          </div>
        </div>
      </div>
      <div class="summarize" v-if="RoleCode=='User'">
        <div class="summarize-tite">总结</div>
        <rich-text :nodes="summary " class="summarize-content"></rich-text>
        <!--<div class="summarize-content">{{data.SummaryInfo ? data.SummaryInfo.Summary :''}}</div>-->
      </div>
    </div>
    <div class="proReport-pageButtom">
      <div class="handbook" @click="handbookSikp">手册</div>
      <div class="project-details" @click="projectDetailsSikp">项目详情</div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
  import wxCharts from "@/../static/charts/wxcharts-min";
  import {
    MyTrainingReportDetail
  } from '@/providers/service'
  export default {
    data() {
      return {
        projeclist: [],
        data: [],
        summary: '',
        RoleCode: '',
        TID: '',
        xAxis: ['合格率', '优秀率', '学习满意度', '专家满意度', '服务满意度', '食宿满意度'],
        barData: [],
          showChartBool:false
      }
    },
    onShow() {
      let {
        TID
      } = this.$route.query;
      this.TID = TID
      let UserID = wx.getStorageSync('userInfo').UserID
      this.RoleCode = wx.getStorageSync('userInfo').RoleCode
      if (this.RoleCode == 'User') {
        var Type = 3
      }
      if (this.RoleCode == 'Expert') { //专家
        var Type = 1
      }
      if (this.RoleCode == 'Leader') { // 领导
        var Type = 2
      }
      MyTrainingReportDetail({
        UserID: UserID,
        TID: TID,
        Type: Type,
        PageSize: 10,
        PageIndex: 0
      }).then((res) => {
        this.projeclist = res.OtherCourseList;
        this.data = res.QXTrainingInfo
        this.data.BTime = this.time(this.data.BTime)
        this.data.ETime = this.time(this.data.ETime)

        this.barData = [
          this.data.QualifiedRate, this.data.OExcellentRate,
          this.data.CourseSatisfaction, this.data.ExpertSatisfaction,
          this.data.EvaluationSatisfaction, this.data.FoodEvaluationSatisfaction
        ];
          // 为空的数据不显示，如果全为空，则图表dom不显示
        let xAxis = []
        let barData = []
        this.barData.forEach((item, index) => {
          if (item !== 0) {
            xAxis.push(this.xAxis[index])
            barData.push(this.barData[index])
          }
        })
          if(xAxis && xAxis.length === 0){
              this.showChartBool = false
          }else{
              this.showChartBool = true
          }
        // 学员角色，看总结
        if (this.RoleCode == 'User') {
          if (res && res.SummaryInfo && res.SummaryInfo.Summary) {
              if(res.SummaryInfo.Summary.length){
                  this.summary = res.SummaryInfo.Summary
              }else if (res.SummaryInfo.Summary === '') {
                  this.summary = '您尚未填写课堂总结'
                }
              } else {
                this.summary = '您尚未填写课堂总结'
              }
        }
        // 领导角色，bar图适配
        if (this.RoleCode == 'Leader' && this.showChartBool) {
            let query = wx.createSelectorQuery().select('.proReport-pageTop').boundingClientRect()
            query.exec((rect) => {
                let barWidth = rect[0].width * 0.9
                let barHeight = rect[0].height *0.3
                this.setCharts(xAxis, barData, barWidth, barHeight)
            })
        }
      })
    },
    methods: {
      navToDetail(item) {
        let { TID } = this.$route.query;
        this.$router.push({ path: '/pages/new/courseInfo', query: { TID, ID: item.ID } })
      },
      projectDetailsSikp() {
        // this.$router.push({path:'/pages/project/projectDetail',query: { TID:this.TID,entranceType:'report'} })
        this.$router.push({ path: '/pages/project/projectDetail', query: { TID: this.TID, type: 1, defaultIndex: 1, entranceType: 'report',from:'projectReport' } })

      },
      handbookSikp() {
        this.$router.push({ path: '/pages/project/projectManual', query: { TID: this.TID } })
      },
      setCharts(xAxis, data, width, height) {
        new wxCharts({
          canvasId: 'barCanvas',
          dataPointShape: false,
          type: 'column',
          categories: xAxis,
          legend: false,
          series: [{
            data: data,
            format: function (val) {
              return val + '%';
            }
          }],
          yAxis: {
            min: 0,
            max: 100,
            title: '百分比(%)',
          },
          width,
          height
        });
      },
      attendance() {
        this.$router.push({
          path: '/pages/projecReport/attendance',
          query: {
            TIDcql: this.data.ID,
            TrainingName: this.data.Name
          }
        })
      },
      time(data) {
        var time = data.substring(0, 10)
        return time
      },
      async MyTrainingReportDetailFn() {
        try {
          let res = await MyTrainingReportDetail({
            UserID: 98376,
            TID: 66,
            Type: 1,
            PageSize: 5,
            PageIndex: 0
          })
        } catch (error) {
          console.log(error)
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .proReport-warp {
    width: 100%;
    height: 100%;

    .proReport-pageTop {
      overflow: auto;
      position: absolute;
      top: 34rpx;
      left: 0;
      right: 0;
      bottom: 84rpx;
      padding-left: 35rpx;
      padding-right: 35rpx;

      .container {
        width: 100%;
        height: 600rpx;
      }

      .proReport-title {
        font-size: 38rpx;
        width: 680rpx;
        height: 90rpx;
        letter-spacing: 3rpx;
        line-height: 44rpx;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
      }

      .proReport-info {
        font-size: 28rpx;
        color: #727272;
        width: 680rpx;
        height: 426rpx;

        div {
          margin-top: 24rpx;
        }

        .infoShow {
          display: flex;
          justify-content: space-evenly;
          width: 100%;
          height: 170rpx;

          .circle {
            margin-top: 0;
            width: 158rpx;
            height: 158rpx;
            border: 2rpx solid #0c9a72;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
          }
        }
      }

      .curriculum {
        margin-top: 60rpx;
        width: 680rpx; //   height: 520rpx;

        .curriculum-tite {
          height: 41rpx;
          width: 608rpx;
          font-size: 30rpx;
          line-height: 41rpx;
          border-bottom: 4rpx solid #309075;
        }

        .curriculum-content {
          width: 654rpx;
          margin-top: 22rpx;

          .curriculum-content-info {
            overflow: hidden;
            height: 70rpx;
            width: 654rpx;
            margin-top: 50rpx;

            .curriculum-content-specialist {
              margin-top: 8rpx;
              height: 26rpx;
              font-size: 24rpx;
              line-height: 26rpx;
              margin-left: 54rpx;
            }

            .curriculum-content-title {
              height: 30rpx;
              max-width: 624rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              line-height: 30rpx;

              span {
                display: inline-block;
                height: 32rpx;
                width: 8rpx;
                vertical-align: -3px;
                background: #0c9a72;
              }

              font-size: 28rpx;
              margin-left: 34rpx;
            }
          }

          div:nth-child(1) {
            margin-top: 0;
          }
        }
      }

      .summarize {
        width: 680rpx;

        .summarize-tite {
          height: 41rpx;
          width: 608rpx;
          font-size: 30rpx;
          line-height: 41rpx;
          margin-bottom: 20rpx;
          border-bottom: 4rpx solid #309075;
        }

        .summarize-content {
          width: 620rpx;
          color: #6c6c6c;
          font-size: 28rpx;
        }
      }
    }

    .proReport-pageButtom {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 84rpx;
      background: green;
      display: flex;

      div {
        flex: 1;
      }

      .handbook {
        background: #1da081;
        font-size: 22rpx;
        color: #ffffff;
        text-align: center;
        line-height: 84rpx;
      }

      .project-details {
        background: #ffab3b;
        font-size: 22rpx;
        color: #ffffff;
        text-align: center;
        line-height: 84rpx;
      }
    }
  }

  .charts-wrap {
    width: 90vw;
      height:30vh;
  }
</style>
